<script>
	import { stringifyDate } from "../lib/helper";
	import ActionMessage from "./ActionMessage.svelte";

	export let message,
		guildID,
		roles = null;
</script>

<ActionMessage iconColor="#3ba55c" id={message.id} author={message.author} {guildID} {roles}>
	<svelte:fragment slot="icon"
		><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
			<path
				fill="#3ba55c"
				fill-rule="evenodd"
				d="M17.7163041 15.36645368c-.0190957.02699568-1.9039523 2.6680735-2.9957762 2.63320406-3.0676659-.09785935-6.6733809-3.07188394-9.15694343-5.548738C3.08002193 9.9740657.09772497 6.3791404 0 3.3061316v-.024746C0 2.2060575 2.61386252.3152347 2.64082114.2972376c.7110335-.4971705 1.4917101-.3149497 1.80959713.1372281.19320342.2744561 2.19712724 3.2811005 2.42290565 3.6489167.09884826.1608492.14714912.3554431.14714912.5702838 0 .2744561-.07975258.5770327-.23701117.8751101-.1527655.2902036-.65262318 1.1664385-.89862055 1.594995.2673396.3768148.94804468 1.26429792 2.351016 2.66357424 1.39173858 1.39027775 2.28923588 2.07641807 2.67002628 2.34187563.4302146-.2452108 1.3086162-.74238132 1.5972981-.89423205.5447887-.28682915 1.0907006-.31944893 1.4568885-.08661115.3459689.2182151 3.3383754 2.21027167 3.6225641 2.41611376.2695862.19234426.4144887.5399137.4144887.91672846 0 .2969525-.089862.61190215-.2808189.88523346"
			/>
		</svg></svelte:fragment
	>
	<svelte:fragment slot="after"
		><span class="text">{" started a call."}</span>
		<span class="date">{stringifyDate(message.timestamp)}</span></svelte:fragment
	>
</ActionMessage>

<style>
	.text {
		white-space: pre;
		color: rgb(150, 152, 157);
	}
	.date {
		color: rgb(190, 190, 190);
		font-size: 10px;
		font-weight: 600;
		line-height: 1;
	}
</style>
